<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="../iconfont/iconfont.css">
  <link rel="stylesheet" href="../css/reset.css">
  <link rel="stylesheet" href="../css/xuanpin.css">
</head>

<body>
  <div id="app2">
    <!-- 头部 -->
    <header id="header">
      <aside class="on">分类</aside>
      <section>品牌</section>
      <div><input type="text" placeholder="海蓝之谜"></div>
    </header>
    <div id="nav">
      <ul>
        <li v-for="item in nav">
          <img :src="item.src">{{item.txt}}
        </li>
      </ul>
      <ol>
        <li v-for="item in nav_nav">
          <img :src="item.src">{{item.txt}}
        </li>
      </ol>
    </div>
    <div id="main">
      <div class="main_top">
        <div class="killing sametop">
          <p class="samep">限时秒杀<span><button>20点场</button><b>{{cuTim}}</b></span></p>
          <section>
            <div v-for="item in killing">
              <img :src="item.src" alt="">
              <p>&yen;{{item.current_price}}<span>&yen;{{item.price}}</span> </p>
            </div>
          </section>
        </div>
        <div class="new_product sametop">
          <p class="samep">新品首发<span><button>周二上新</button></span></p>
          <section>
            <div>
              <img src="../images/选品-04-新品首发01.png" alt="">
            </div>
            <div><img src="../images/选品-04-新品首发02.png" alt=""></div>
          </section>
        </div>
      </div>
      <div class="new_pepole">
        <p><span>新人美妆精选</span>秒变时尚达人 </p>
        <section>
          <div v-for="item in new_pepole">
            <img :src="item.src" alt="">{{item.txt}}
          </div>
        </section>
      </div>
      <div class="main_bottom">
        <div class="sameJ">
          <p class="sameJ_p">超值捡漏</p>
          <section>
            <div><img src="../images/选品-06-超值捡漏01.png" alt="">1.7折起</div>
            <div><img src="../images/选品-06-超值捡漏02.png" alt="">2.8折起</div>
          </section>
        </div>
        <div class="sameJ">
          <p class="sameJ_p">拼图商城</p>
          <section>
            <div><img src="../images/选品-06-拼团商城01.png" alt="">￥98包邮</div>
            <div><img src="../images/选品-06-拼团商城02.png" alt="">￥200包邮</div>
          </section>
        </div>
      </div>
      <div class="main_goods">
        <section v-for="item in goods">
          <div>
            <img :src="item.src" alt=""></div>
          <div class="main_goods_right">
            <p>{{item.txt}}</p>
            <p>&yen;{{item.current_price}}</p>
            <p><button>满赠</button> {{item.tuijian}} 推荐</p>
          </div>
        </section>
      </div>
    </div>
    <footer id="bottom_nav">
      <section v-for="item,index in footerBtn" :class="index===footerBtnSelected?'on':''"
        @click="footerBtnSelected=index">
        <i class="iconfont" :class="item.icon"></i>{{item.title}}
      </section>
    </footer>
  </div>
  <!-- <script src="../images/选品-07-商品01.png"></script> -->
  <script src="../js/flexible.js"></script>
  <script src="../lib/vue2.js"></script>
  <script>
    var app2 = new Vue({
      el: "#app2",
      data() {
        return {
          nav: [
            {
              src: "../images/选品-02-推荐.png",
              txt: "推荐"
            },
            {
              src: "../images/选品-02-护肤.png",
              txt: "护肤"
            },
            {
              src: "../images/选品-02-彩妆.png",
              txt: "彩妆"
            },
            {
              src: "../images/选品-02-个护.png",
              txt: "个护"
            },
            {
              src: "../images/选品-02-美容保健.png",
              txt: "美容保健"
            }
          ],
          nav_nav: [
            {
              src: "../images/选品-03-洁面.png",
              txt: "洁面"
            },
            {
              src: "../images/选品-03-化妆水.png",
              txt: "化妆水"
            },
            {
              src: "../images/选品-03-精华.png",
              txt: "精华"
            },
            {
              src: "../images/选品-03-乳液.png",
              txt: "乳液"
            },
            {
              src: "../images/选品-03-防晒.png",
              txt: "防晒"
            },
            {
              src: "../images/选品-03-口红.png",
              txt: "口红"
            },
            {
              src: "../images/选品-03-粉底.png",
              txt: "粉底"
            },
            {
              src: "../images/选品-03-隔离.png",
              txt: "隔离"
            }
          ],
          cuTim: "00:00:34",
          killing: [
            {
              src: "../images/选品-04-限时秒杀01.png",
              current_price: "885",
              price: "960"
            },
            {
              src: "../images/选品-04-限时秒杀02.png",
              current_price: "380",
              price: "450"
            }
          ],
          new_pepole: [
            {
              src: "../images/选品-05-新人美妆精选01.png",
              txt: "7件套赠品"
            },
            {
              src: "../images/选品-05-新人美妆精选02.png",
              txt: "精华"
            },
            {
              src: "../images/选品-05-新人美妆精选03.png",
              txt: "满额8折"
            },
            {
              src: "../images/选品-05-新人美妆精选04.png",
              txt: "2件套赠品"
            },
          ],
          footerBtnSelected: 1,
          footerBtn: [
            {
              title: "首页",
              icon: "icon-shouye"
            },
            {
              title: "选品",
              icon: "icon-icon-test47"
            },
            {
              title: "购物袋",
              icon: "icon-gouwuche"
            },
            {
              title: "我的",
              icon: "iconfont icon-me"
            }
          ],
          goods: [
            {
              src:"../images/选品-07-商品01.png",
              txt: "GEOSKINCARE/ 纽西之谜火山岩泥浆100ML",
              current_price:"58",
              tuijian:"小吉"
            },
            {
              src:"../images/选品-07-商品02.png",
              txt: "MAC/魅可 子弹头唇膏口红3g#602/Chili 小辣椒",
              current_price:"210",
              tuijian:"留白"
            },
            {
              src:"../images/选品-07-商品03.png",
              txt: "ESTEE LAUDER/雅诗兰黛 DW持妆粉底液",
              current_price:"199",
              tuijian:"留白"
            }
          ]
        }
      },
      methods: {

      },
      computed: {

      },
      components: {

      }
    })
  </script>
</body>

</html>